<template>
  <div class="staff-scale-wrap">
    <sheet-header :type="type" 
                  :tabs="tabs"
                  @search="search"
                  @reset="reset"
                  @export="exportReport" @init="initReport"
                  @switch-type="switchType" ref="header" />

    <staff-table v-show="type==='month'"
                 :total="monthTotal"
                 type="month"
                 @page-num="pageHandler"
                 @page-size="sizeHandler"
                 :page="monthPage"
                 :page-size="monthPageSize"
                 :list="monthList"
                 :aggregate="monthAggregate"
    />

    <staff-table v-show="type === 'week'"
                 :total="weekTotal"
                 type='week'
                 @page-num="pageHandler"
                 @page-size="sizeHandler"
                 :page="weekPage"
                 :page-size="weekPageSize"
                 :list="weekList"
                 :aggregate="weekAggregate" />

    <staff-table v-show="type === 'day'"
                 type='day'
                 @page-num="pageHandler"
                 @page-size="sizeHandler"
                 :total="dayTotal"
                 :page="dayPage"
                 :page-size="dayPageSize"
                 :list="dayList"
                 :aggregate="dayAggregate" />
  </div>
</template>

<script>
// 人才规模报表
import SheetHeader from '../SheetHeader'
import StaffTable from './StaffTable'
import {fetchStaffScaleReport, fetchStaffScaleAggregate} from '../../../../api/report'
import qs from 'qs'

const common = require('../../../../static/tool')
const PAGE_SIZE = 20

export default {
  name: 'StaffScaleReport',
  components: {
    SheetHeader,
    StaffTable
  },
  data() {
    return {
      url: common.url,
      type: 'month',
      types: ['month', 'week', 'day'],
      monthList: [],
      monthTotal: 0,
      monthPage: 1,
      monthPageSize: 20,
      monthAggregate: {},
      weekList: [],
      weekTotal: 0,
      weekPage: 1,
      weekPageSize: 20,
      weekAggregate: {},
      dayList: [],
      dayTotal: 0,
      dayPage: 1,
      dayPageSize: 20,
      dayAggregate: {},
      tabs: [
        {key: 'month', text: '月', active: true},
        {key: 'week', text: '周', active: false},
        {key: 'day', text: '日', active: false}
      ]
    }
  },
  methods: {
    switchType(type) {
      this.type = type
    },

    // 重置
    reset({type}) {
      this[`${type}Page`] = 1
      this[`${type}PageSize`] = 20
    },

    // 翻页
    pageHandler({page, type}) {
      const query = this.$refs.header.getCurrentQuery()
      this[`${type}Page`] = page
      this.fetchReportData(query)
    },

    // 切换页码
    sizeHandler({size, type}) {
      const query = this.$refs.header.getCurrentQuery()
      this[`${type}Page`] = 1
      this[`${type}PageSize`] = size
      this.fetchReportData(query)
    },

    // 初始化进入页面发起请求
    initReport(query) {
      this.fetchReportData(query)
    },
    // 条件变化触发(搜索 + 总计)
    async search(query) {
      this[`${this.type}Page`] = 1
      this[`${this.type}PageSize`] = PAGE_SIZE
      this.fetchReportData(query)
    },

    async fetchReportData(query={}) {
      try {
        const {type} = query
        // 总计
        if (this[`${type}Page`] === 1) {
          const {aggregate} = await fetchStaffScaleAggregate(query)
          this[`${type}Aggregate`] = aggregate || {}
        }

        // 列表
        const {list, total} = await fetchStaffScaleReport({
          ...query,
          page: this[`${type}Page`],
          page_size: this[`${type}PageSize`],
        })

        this[`${type}List`] = list || []
        this[`${type}Total`] = total || 0
      } catch (err) {
        console.log('---err', err)
      }
    },

    exportReport() {
      const params = qs.stringify({
        token: JSON.parse(sessionStorage.getItem('manageInfo')).token,
        ...this.$refs.header.getCurrentQuery()
      })

      window.location.href = this.url + '/statistics/staffScale/exportList?' + params
    },
  }
}
</script>

<style scoped lang="scss">
.staff-scale-wrap {
  height: 100%;
}
</style>



// WEBPACK FOOTER //
// src/components/sheet/staff/StaffScaleReport.vue